<?php
/** @var string $data */
/** @var string $isSafe */
/** @var string $uploadUrl */
/** @var string $assets */
/** @var string $scripts */
?>

var grapesjsZhCn = {
    assetManager: {
        addButton: '添加图片',
        inputPlh: 'http://path/to/the/image.jpg',
        modalTitle: '选择图片',
        uploadTitle: '点击或者拖拽图片上传'
    },
    domComponents: {
        names: {
            '': '容器',
            wrapper: '页面主体',
            text: '文字',
            comment: '评论',
            image: '图片',
            video: '视频',
            label: '标签',
            link: '超链接',
            map: '地图',
            tfoot: '表格页脚',
            tbody: '表格主体',
            thead: '表头',
            table: '表格',
            row: '行',
            cell: '单元格'
        }
    },
    deviceManager: {
        device: '设备',
        devices: {
            desktop: '桌面',
            tablet: '平板',
            mobileLandscape: '手机横屏',
            mobilePortrait: '手机竖屏'
        }
    },
    panels: {
        buttons: {
            titles: {
                preview: '预览',
                fullscreen: '全屏',
                'sw-visibility': '查看组件',
                'export-template': '导出代码',
                'open-sm': '打开样式管理器',
                'open-tm': '打开设置',
                'open-layers': '打开层级管理器',
                'open-blocks': '打开组件库'
            }
        }
    },
    selectorManager: {
        label: '样式类',
        selected: '已选择',
        emptyState: '- 状态 -',
        states: {
            hover: '悬停',
            active: '点击',
            'nth-of-type(2n)': '奇偶行'
        }
    },
    styleManager: {
        empty: '请先选择一个元素再设置样式',
        layer: '层级',
        fileButton: '选择图片',
        sectors: {
            general: '常规',
            layout: '布局',
            typography: '排版',
            decorations: '装饰',
            extra: '扩展',
            flex: '弹性布局',
            dimension: '尺寸'
        }
    },
    traitManager: {
        empty: '请先选择一个组件再设置属性',
        label: '组件属性',
        traits: {
            attributes: {
                id: { placeholder: '例如. 元素ID' },
                alt: { placeholder: '例如. 图片描述' },
                title: { placeholder: '例如. 标题文字' },
                href: { placeholder: '例如. https://google.com' }
            },
            options: {
                target: {
                    false: '当前窗口',
                    _blank: '新窗口'
                }
            }
        }
    }
};
var editor = grapesjs.init({
    container: '#app',
    language: 'zh',
    components: AdminUtil.base64Decode('<?= $data ?>'),
    parser: {
        optionsHtml: {
            allowScripts: <?= $isSafe ?>, // 编辑时禁用脚本执行
        }
    },
    canvas: {
        scripts:<?= $scripts ?>
    },
    storageManager:{
        autosave: false,
        autoload: false
    },
    assetManager:{
        assets: <?= $assets ?>,
        upload: '<?= $uploadUrl ?>',
        uploadName: 'file',
        multiUpload: false
    },
    i18n:{
        locale: 'zh',
        localeFallback: 'en',
        detectLocale: true,
        debug: false,
        messages: { zh: grapesjsZhCn },
    }
});